<template>
    <div class="mapPrint">
        <div class="hanlderBox">
            打印尺寸：
            <el-select v-model="prints.value" class="mapPrintSelect" placeholder="Select">
                <el-option v-for="item in print" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <map_button @click="saveImages"><i class="fa fa-floppy-o"></i>&nbsp;&nbsp;存为图片</map_button>
            <map_button @click="printImg"><i class="fa fa-print"></i>&nbsp;&nbsp;打印</map_button>
            <map_button @click="closePrintMap" title="关闭"><i class="fa fa-close" style="margin-right: 0 !important"></i></map_button>
        </div>
        <div class="printImgBox" v-if="prints.printImgUrl">
            <img :src="prints.printImgUrl" alt="" class="printImgBoxImage" />
        </div>
    </div>
</template>
<script setup lang="ts">
import map_button from "@/components/button.vue";
import { watch, ref, nextTick } from "vue";
import { print } from "@/config/config";
import { widget, store, map } from "@/utils/global";
// import { useStore } from "@/stores/index1";
// const store = useStore();
const prints = widget.print;
// 选项列表
// 监听下拉框数据变化
watch(
    prints,
    (oldVal, newVal) => {
        print.forEach((v) => {
            if (v.value == newVal.value) {
                prints.valStyle = v.style;
            }
        });
    },
    {
        deep: true,
    }
);
const saveImages = () => {
    map.expImage();
};
// 打印按钮
const printImg = () => {
    map.expImage({
        download: false,
        callback: (base64: any, size: number) => {
            console.log(base64, 231321);
            prints.printImgUrl = base64.image;
            setTimeout(() => {
                window.print();
                setTimeout(() => {
                    prints.printImgUrl = "";
                }, 300);
            }, 500);
        },
    });
};
/**
 * 关闭打印地图
 */
const closePrintMap = () => {
    prints.show = false;
    prints.printImgUrl = "";
    nextTick(() => {
        closePrintMapTree(store.treeData);
    });
};
/**
 * 处理关闭打印地图图层树不选中问题
 */
const closePrintMapTree = (data: any) => {
    data.forEach((item: any) => {
        if (item.show) {
            store.tree.setChecked(item.id, true);
        }
        if (item.children && item.children.length > 0) {
            closePrintMapTree(item.children);
        }
    });
};
</script>
<style lang="scss" scoped>
.mapPrint {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index: 2001;
    .mapPrintSelect {
        width: 160px !important;
        margin-right: 12px;
    }
    .hanlderBox {
        color: #ffffff;
        background: rgba(63, 72, 84, 0.6);
        padding: 5px 10px;
        display: inline-block;
        border-radius: 5px;
        position: absolute;
        top: 10px;
        right: 10px;
        white-space: nowrap;
    }
    .printImgBox {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 100%;
        height: 100%;
        z-index: 3002;
    }
    .printImgBoxImage {
        width: 100%;
        object-fit: none;
        background: rgb(204, 204, 204);
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: 3005;
    }
}
</style>
